<template>
  <div>
    <el-button type="primary"
               @click="print">打印</el-button>
    <div id="test">
      <div v-for="(item,index) in 3"
           :key="index"
           class="print-template">
        <h4 style="text-align:center;">过磅清单</h4>
        <div class="car-no">
          <p>车牌号</p>
          <h3 style="text-align:center">{{datas.no}}</h3>
        </div>
        <div class="in-data">
          <p>进场记录</p>
          <p>时间：{{datas.in.time}}</p>
          <p class="bold">重量：{{datas.in.weight}}</p>
        </div>
        <div class="out-data">
          <p>出场记录</p>
          <p>时间：{{datas.out.time}}</p>
          <p class="bold">重量：{{datas.out.weight}}</p>
        </div>
        <div class="net-weight">
          <p>净重</p>
          <p class="bold">{{datas.weight}}</p>
          <p>供应商</p>
          <p class="bold">测试1111</p>
          <p style="text-align:center">无人值守称重管理系统</p>
          <p style="text-align:center">技术支持：0571-89192351</p>
          <p style="text-align:center">第{{index}}联</p>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  components: {

  },
  data () {
    return {
      datas: {
        no: '浙A12345',
        in: {
          time: '2021-11-23',
          weight: 6000
        },
        out: {
          time: '2021-11-23',
          weight: 1000
        },
        weight: 2000
      },
      requestParam: {
        search: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      resetParam: {
        search: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      projectList: {
        list: [],
        page: 1,
        total_count: 0
      }
    };
  },
  watch: {

  },
  props: {

  },
  computed: {

  },
  methods: {
    print () {
      //判断iframe是否存在，不存在则创建iframe
      var iframe = document.getElementById("print-iframe");
      var el = document.getElementById('test')
      var doc = null;
      if (!iframe) {
        iframe = document.createElement('IFRAME');

        iframe.setAttribute("id", "print-iframe");
        iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
        document.body.appendChild(iframe);
      }
      doc = iframe.contentWindow.document;
      let style = `
          <style media="print">
              p {
                font-size: 11px;
                margin:4px;
              }
              h2,h3,h4{
                margin:0;
              }
              .print-template {
                border: 1px solid #000;                
                width: 250px;
                margin-bottom:10px;
              }
              .car-no {
                border-bottom: 1px solid #000;
                
              }
              .in-data {
                border-bottom: 1px solid #000;
                
              }
              .out-data {
                border-bottom: 1px solid #000;
                
              }
              .net-weight {
                
              }
              .bold {
                font-weight: bold;
              }
              @page {size: auto;margin: 0mm;}
            </style>
          `
      //这里可以自定义样式
      doc.write(style); //解决出现页眉页脚和路径的问题
      // doc.write('<style media="print">@page {size: auto;margin: 0mm;} </style>');
      doc.write('<div>' + el.innerHTML + '</div>');
      doc.close();
      iframe.contentWindow.focus();
      setTimeout(function () { iframe.contentWindow.print(); }, 50)
    },
    handlePageChange (page) {
      this.requestParam.page = page
      this.get
    }
  },
  created () {

  },
  mounted () {

  },
};
</script>

<style scoped lang="scss">
p {
  font-size: 12px;
}
.print-template {
  border: 1px solid #000;
  width: 300px;
}
.car-no {
  border-bottom: 1px solid #000;
}
.in-data {
  border-bottom: 1px solid #000;
}
.out-data {
  border-bottom: 1px solid #000;
}
.net-weight {
}
.bold {
  font-weight: bold;
}
</style>
